<template>
	<view class="bagDialogContainer">
		<view class="header">
			<text class="headerTitle">请选择购物袋</text>
			<text class="headerTips">购买后可到自助收银专属通道领取</text>
			<image class="headerCloseImg" src="/static/icon/pop_close.png" @tap="onTapCloseImg" />
		</view>
		
		<view class="middle">
			<view class="middleBag">
				<view class="middleBagItem" 
					v-for="(item, index) in bags" 
					:key="index"
					:style="{marginRight: index == 0 ? '50rpx' : null} "
					@tap="onTapBag(index)"
				>
					<image :src="selectedIndex == index ? item.selectedIconPath : item.iconPath" class="middleBagItemImg"/>
					<text class="middleBagItemText">{{item.text}}</text>
				</view>
			</view>
			
			<view class="middleCounter">
				<counter :quantity="quantity" @minus="onCounterMinus" @plus="onCounterPlus" />
			</view>
		</view>
		
		<view class="footer">
			<view class="footerBtn cancelBtn" @click="close">
				<text class="btnText">不需要</text>
			</view>
			<view class="footerBtn addBtn" @click="onOk">
				<text class="btnText">确定</text>
			</view>
		</view>

	</view>
</template>

<script>
	/**
	 * @property {Boolean} beforeClose 是否拦截取消事件
	 * @event {Function} confirm 点击确认按钮触发
	 * @event {Function} close 点击取消按钮触发
	 */
	import counter from '@/components/counter/counter.vue'

	export default {
		name: "uniPopupProductDialog",
		components: {counter},
		props: {
			/**
			 * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
			 */
			beforeClose: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '产品名称'
			},
			pic: {
				type: String,
				default: '/static/icon/product_default.png'
			},
			limit: {
				type: Number,
				default: 10
			}
		},
		computed: {
			
		},
		data() {
			return {
				focus: false,
				quantity: 1,
				selectedIndex: -1,
				bags: [
					{
						text: '小 ¥0.2/个',
						iconPath: '/static/icon/scangoods_small_n.png',
						selectedIconPath: '/static/icon/scangoods_small_s.png',
					},
					{
						text: '大 ¥0.3/个',
						iconPath: '/static/icon/scangoods_big_n.png',
						selectedIconPath: '/static/icon/scangoods_big_s.png',
					},
				]
			}
		},
		inject: ['popup'],
		created() {
			// 对话框遮罩不可点击
			this.popup.mkclick = false
		},
		methods: {
			/**
			 * 点击确认按钮
			 */
			onOk() {
				this.$emit('confirm', () => {
					this.popup.close()
				}, this.quantity, this.selectedIndex)
			},
			/**
			 * 点击取消按钮
			 */
			close() {
				if (this.beforeClose) {
					this.$emit('close', () => {
						this.popup.close()
					})
					return
				}
				this.popup.close()
			},
			onCounterMinus() {
				if (this.selectedIndex == -1) return
				console.log('onCounterMinus...')
				this.quantity--
			},
			onCounterPlus() {
				if (this.selectedIndex == -1) return
				console.log('onCounterPlus...')
				this.quantity++
			},
			onTapBag(index) {
				this.selectedIndex = index
			},
			onTapCloseImg() {
				this.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	.bagDialogContainer {
		/* #ifndef APP-NVUE */ 
		display: flex;
		/* #endif */ 
		flex-direction: column;
		background-color: #ffffff;
		width: 750rpx;
		height: 660rpx;
		/* padding: 40rpx 35rpx 35rpx 40rpx; */
	}
	.header {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */ 
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		border-bottom-color: #C0C0C0;
		height: 90rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		position: relative;
	}
	.headerTitle {
		font-size: 32rpx;
		text-align: center;
		margin-bottom: 5rpx;
	}
	.headerTips {
		font-size: 26rpx;
		color: #909399;
		text-align: center;
	}
	.headerCloseImg {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		right: 0;
		top: 45rpx;
		transform: translateY(-14rpx);
	}
	
	.middle {
		/* #ifndef APP-NVUE */
		display: flex;
		max-height: 440rpx;
		/* #endif */
		flex-direction: column;
		flex: 1;
	}
	.middleBag {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		// background-color: pink;
	}
	.middleBagItem {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}
	.middleBagItemImg {
		width: 200rpx;
		height: 200rpx;
		background-color: #F7F7F7;
		border-radius: 50%;
	}
	.middleBagItemText {
		font-size: 28rpx;
		color: #4f5054;
		margin-top: 20rpx;
	}
	.middleCounter {
		flex: 1;
		align-items: center;
		justify-content: center;
	}
	
	.footer {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		// padding-top: 30rpx;
		// padding-bottom: 30rpx;
		height: 130rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-top-width: 1rpx;
		border-top-style: solid;
		border-top-color: #C0C0C0;
	}
	.footerBtn {
		width: 200rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}
	.cancelBtn {
		background-color: #404040;
	}
	.addBtn {
		background-color: #f43f26;
	}
	.btnText {
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
	}
</style>
